<!-- From Uiverse.io by omriluz  - Tags: simple, tooltip, icon, animation, hover effect, css -->
<div class="flex h-screen items-center justify-center">
  <div
    class="group relative flex h-40 w-40 items-center justify-center rounded-full border-[3px] border-purple-900 bg-gradient-to-bl from-amber-300 to-purple-500"
  >
    <div
      class="absolute inset-0 z-10 flex flex-col items-center justify-center text-center"
    >
      <span class="rounded-lg bg-white/50 p-2 text-xl font-bold text-gray-600"
        >Uiverse.io</span
      >
    </div>
    <svg
      class="absolute left-8 top-6 aspect-square w-10 text-amber-600 transition-all duration-1000 group-hover:-rotate-180"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="currentColor"
      version="1.1"
      id="Capa_1"
      viewBox="0 0 45.973 45.973"
      xml:space="preserve"
    >
      <g>
        <g>
          <path
            d="M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774    c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815    C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607    c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205    C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501    C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763    c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733    s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128    c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735    c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77    c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z     M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85    C30.906,27.334,27.355,30.85,22.976,30.85z"
          ></path>
        </g>
      </g>
    </svg>
    <svg
      class="absolute left-[7px] top-[50px] aspect-square w-10 rotate-45 text-amber-400 transition-all duration-1000 group-hover:rotate-[225deg]"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="currentColor"
      version="1.1"
      id="Capa_1"
      viewBox="0 0 576.048 576.047"
      xml:space="preserve"
    >
      <g>
        <g>
          <path
            d="M491.103,215.312c-8.841-24.651-22.222-47.73-39.651-67.984l41.965-73.324L368.537,2.532l-41.965,73.324    c-26.307-4.777-52.972-4.618-78.703,0.245L205.384,3.135L81.035,75.571l42.485,72.966c-8.394,9.89-16.105,20.572-22.807,32.28    c-6.683,11.677-11.989,23.736-16.282,36.013L0,217.154l0.529,143.909l84.45-0.318c8.822,24.68,22.194,47.711,39.636,67.979    l-41.965,73.32l124.878,71.473l41.965-73.324c26.292,4.768,52.954,4.648,78.672-0.264l42.501,72.979l124.349-72.434l-42.487-72.93    c8.394-9.932,16.138-20.633,22.821-32.311c6.701-11.707,11.989-23.779,16.298-36.043l84.4-0.303l-0.529-143.909L491.103,215.312z     M413.733,359.967c-39.734,69.426-128.229,93.496-197.655,53.762s-93.495-128.23-53.761-197.655    c39.734-69.425,128.229-93.495,197.654-53.761C429.397,202.047,453.468,290.542,413.733,359.967z"
          ></path>
        </g>
      </g>
    </svg>
    <div
      class="absolute h-full w-full bg-gradient-to-br from-amber-300 to-purple-500 opacity-0 group-hover:opacity-90 rounded-none group-hover:rounded-[100px] right-0 group-hover:-right-[50%] blur-md group-hover:blur-none z-40 transition-all duration-1000 flex justify-center items-center"
    >
      <span class="rounded-lg bg-white/50 p-2 text-xl font-bold text-gray-600"
        >Let's Create!</span
      >
    </div>
  </div>
</div>


    